<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 1000 + 'px'
			})
		</script>
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--自定义css-->
		<link rel="stylesheet" href="css/zui.css">
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon" ></a>
			<h1 class="mui-title">风险区域</h1>
		</header>
		<div id="app">
			<div class="mui-content" style="padding-top : 60px; margin-left:10px;margin-right: 10px;height: 100%">
                <h5>风险区域信息来源为中国政府网卫健委疫情风险等级查询(http://bmfw.www.gov.cn/yqfxdjcx/risk.html)</h5>
				<div class="mui-card-header mui-card-media">
					<img src="img/red.png" />
					<div class="mui-media-body">
						高风险地区 {{hcount}} 个
						<p>发布于 {{end_update_time}}</p>
					</div>
				</div>
				<div class="mui-card">
					<ul class="mui-table-view">
						<li v-for="i in highlist" class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#"><h4>{{ i.area_name }}</h4></a>
							<div class="mui-collapse-content">
								<form class="mui-input-group">
									<ul>
										<li v-for="j in i.communitys">
											<label>{{ j }} </label>
										</li>
									</ul>
								</form>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
			<div class="mui-content" style="padding-top : 60px; margin-left:10px;margin-right: 10px;height: 100%">
				<div class="mui-card-header mui-card-media">
					<img src="img/yellow.png" />
					<div class="mui-media-body">
						低风险地区 {{mcount}} 个
						<p>发步于 {{end_update_time}}</p>
					</div>
				</div>
				<div class="mui-card">
					<ul class="mui-table-view">
						<li v-for="i in middlelist" class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right" href="#"><h4>{{ i.area_name }}</h4></a>
							<div class="mui-collapse-content">
								<form class="mui-input-group">
									<ul>
										<li v-for="j in i.communitys">
											<label>{{ j }} </label>
										</li>
									</ul>
								</form>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<br><br><br>
			<div id="footer">
				COVID-19 RA @{{year}} 
				<a href="https://zolty.blog.csdn.net/">zolty</a>
			</div>
		</div>
		<script src="js/ra.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/index.min.js"></script>
		<script src="js/moment.min.js"></script>
		<script type="text/javascript">  
			var vm = new Vue({
				el: "#app",
				data: {
					hcount:'',
					mcount:"",
					end_update_time:{},
					highlist:{},
					middlelist:{},
					year : moment().format("YYYY")
				},
				mounted:function () {
					this.hcount = gwdata["data"]["hcount"];
					this.mcount = gwdata["data"]["lcount"];
					this.end_update_time = gwdata["data"]["end_update_time"]
					this.highlist = gwdata["data"]["highlist"];
					this.middlelist = gwdata["data"]["lowlist"];
				},
				methods: {
				}
			});
		</script>
	</body>
</html>